<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
})

var legendData = ['车辆数', '设计车位'] //图例
var indicator = [
  {
    text: '小型车',
    max: 6000,
  },
  {
    text: '中型车',
    max: 5000,
  },
  {
    text: '大型车',
    max: 5000,
  },
  {
    text: '货车',
    max: 5000,
    //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
  },
  {
    text: '特种车',
    max: 5000,
  },
  {
    text: '贵宾车',
    max: 5000,
  },
]
var dataArr = [
  {
    value: [4300, 4700, 3600, 3900, 3800, 4200],
    name: legendData[0],
    itemStyle: {
      normal: {
        lineStyle: {
          color: '#4A99FF',
          // shadowColor: '#4A99FF',
          // shadowBlur: 10,
        },
        shadowColor: '#4A99FF',
        shadowBlur: 10,
      },
    },
    areaStyle: {
      normal: {
        // 单项区域填充样式
        color: {
          type: 'linear',
          x: 0, //右
          y: 0, //下
          x2: 1, //左
          y2: 1, //上
          colorStops: [
            {
              offset: 0,
              color: '#4A99FF',
            },
            {
              offset: 0.5,
              color: 'rgba(0,0,0,0)',
            },
            {
              offset: 1,
              color: '#4A99FF',
            },
          ],
          globalCoord: false,
        },
        opacity: 1, // 区域透明度
      },
    },
  },
  {
    value: [3200, 3000, 3400, 2000, 3900, 2000],
    name: legendData[1],
    itemStyle: {
      normal: {
        lineStyle: {
          color: '#4BFFFC',
          // shadowColor: '#4BFFFC',
          // shadowBlur: 10,
        },
        shadowColor: '#4BFFFC',
        shadowBlur: 10,
      },
    },
    areaStyle: {
      normal: {
        // 单项区域填充样式
        color: {
          type: 'linear',
          x: 0, //右
          y: 0, //下
          x2: 1, //左
          y2: 1, //上
          colorStops: [
            {
              offset: 0,
              color: '#4BFFFC',
            },
            {
              offset: 0.5,
              color: 'rgba(0,0,0,0)',
            },
            {
              offset: 1,
              color: '#4BFFFC',
            },
          ],
          globalCoord: false,
        },
        opacity: 1, // 区域透明度
      },
    },
  },
]
var colorArr = ['#4A99FF', '#4BFFFC'] //颜色
const option = {
  // backgroundColor: '#013A54',
  color: colorArr,
  legend: {
    orient: 'vertical',
    icon: 'circle', //图例形状
    data: legendData,
    bottom: 10,
    right: 10,
    itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
    itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
    itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
    textStyle: {
      fontSize: 14,
      color: '#00E4FF',
    },
  },
  radar: {
    // shape: 'circle',
    center: ['50%', '50%'],
    name: {
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
    },
    indicator: indicator,
    splitArea: {
      // 坐标轴在 grid 区域中的分隔区域，默认不显示。
      show: true,
      areaStyle: {
        // 分隔区域的样式设置。
        color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
      },
    },
    axisLine: {
      //指向外圈文本的分隔线样式
      lineStyle: {
        color: '#1D6B86',
      },
    },
    splitLine: {
      lineStyle: {
        color: '#1D6B86', // 分隔线颜色
        width: 1, // 分隔线线宽
      },
    },
  },
  series: [
    {
      type: 'radar',
      symbolSize: 8,
      // symbol: 'angle',
      data: dataArr,
    },
  ],
}

const chart = ref()
let timer1 = null
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
  // 使用定时器
  timer1 = setInterval(() => {
    // debugger;
    const item1 = props.data1.shift()
    props.data1.push(item1)
    const item2 = props.data2.shift()
    props.data2.push(item2)
    const item3 = props.data3.shift()
    props.data3.push(item3)
  }, 2000)
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
